﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
	<link href="js-console.css" rel="stylesheet" />
	<!-- 4. Write a function to count the number of DIVs on the web page  -->
	<style>
		button {
			width: 800px;
		}
		div {
			border: 1px dotted red;
			display: inline-block;
			margin-right: 10px;
			margin-bottom: 10px;
		}
	</style>
</head>
<body onload="countDivs()">
	<button onclick="countDivs()">Count Div</button>
	<button onclick="addDiv()">Add Div</button>
	<div id="js-console"></div>
	<script src="js-console.js"></script>
	<script>
		function addDiv() {
			var div = document.createElement("div");
			if (div != undefined) {
				div.innerHTML = "New div number " + (getDivsCount() + 1);
				document.body.appendChild(div);
			}
		}

		function getDivsCount() {
			var result = 0;

			var divs = document.getElementsByTagName("div");
			if (divs != undefined) {
				result = divs.length;
			}

			return result;
		}

		function countDivs() {
			jsConsole.writeLine(getDivsCount());
		}
	</script>
</body>
</html>
